<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>分类</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
</head>
<body>
<body>
<div class="aui-content aui-margin-t-5" id="app" v-cloak>
    <ul class="aui-list aui-media-list">
        <transition-group name="list" tag="p">
        <li class="aui-list-item" v-for="(vo,index) in list" v-bind:key="index">
            <div class="aui-media-list-item-inner" @click="open_content(index)">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title aui-font-size-14">
                            {{ vo.title }}
                        </div>
                    </div>
                    <div class="aui-info aui-padded-b-0">
                        <div class="aui-info-item aui-font-size-12">
                            <img src="../image/001.jpg" style="width:1rem" class="aui-img-round" />
                            <span class="aui-margin-l-5">孟老师</span>
                        </div>
                        <div class="aui-info-item aui-font-size-12">{{ vo.create_time|time }}</div>
                    </div>
                </div>
                <div class="aui-list-item-media">
                    <img :src="vo.url">
                </div>
            </div>
        </li>
        </transition-group>

    </ul>
</div>
</body>
</body>
</html>
<script src="../script/api.js"></script>
<script src="../script/common.js"></script>
<script src="../script/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            cid: '',
            p: 1,
            list: [
                {
                    "id": "24",
                    "title": "台媒:大陆交通建设快马加鞭 高铁高速路跃居世界第一",
                    "create_time": "1483200985",
                    "url": "http://o9ru2uk83.bkt.clouddn.com/2017-01-01_5867d71b4a176.jpg"
                },
                {
                    "id": "23",
                    "title": "《逃避可耻但有用》：赐我一个可以形婚的对象吧",
                    "create_time": "1483200937",
                    "url": "http://o9ru2uk83.bkt.clouddn.com/2017-01-01_5867d71b4a176.jpg"
                },
                {
                    "id": "22",
                    "title": "饿了么：三招错旗 让先行者惨败2016",
                    "create_time": "1483200871",
                    "url": "http://o9ru2uk83.bkt.clouddn.com/2017-01-01_5867d71b4a176.jpg"
                },
                {
                    "id": "21",
                    "title": "中国2016年新生儿增多 外媒：难纠正人口失衡",
                    "create_time": "1483200830",
                    "url": "http://o9ru2uk83.bkt.clouddn.com/2017-01-01_5867d71b4a176.jpg"
                },
                {
                    "id": "20",
                    "title": "中国加紧培育航母编队 日媒鼓动政府引进航母",
                    "create_time": "1483200786",
                    "url": "http://o9ru2uk83.bkt.clouddn.com/2017-01-01_5867d71b4a176.jpg"
                },
                {
                    "id": "19",
                    "title": "BBC：安倍刚访毕珍珠港 日本女防相参拜靖国神社",
                    "create_time": "1483200740",
                    "url": "http://o9ru2uk83.bkt.clouddn.com/2017-01-01_5867d71b4a176.jpg"
                },
                {
                    "id": "18",
                    "title": "萨达姆女儿称父亲是英雄：赞特朗普反对伊拉克战争",
                    "create_time": "1483200697",
                    "url": "http://o9ru2uk83.bkt.clouddn.com/2017-01-01_5867d71b4a176.jpg"
                },
                {
                    "id": "17",
                    "title": "德媒：中国对世界经济增长贡献远超欧美",
                    "create_time": "1483200659",
                    "url": "http://o9ru2uk83.bkt.clouddn.com/2017-01-01_5867d71b4a176.jpg"
                },
                {
                    "id": "16",
                    "title": "外媒:中国捕获美军潜航器 向特朗普发警告信号",
                    "create_time": "1483200590",
                    "url": "http://o9ru2uk83.bkt.clouddn.com/2017-01-01_5867d71b4a176.jpg"
                },
                {
                    "id": "15",
                    "title": "外媒关注中方在南海捕获美军潜航器",
                    "create_time": "1483200552",
                    "url": "http://o9ru2uk83.bkt.clouddn.com/2017-01-01_5867d71b4a176.jpg"
                }
            ]
        },
        methods: {
            init: function () {
                api.ajax({
                    url: article_list_url,//解决了跨域问题
                    method: 'post',
                    timeout: 30,
                    dataType: 'json',
                    returnAll: false,
                    data: {
                        values: {
                            cid: vm.cid,
                            p: vm.p
                        },
                    }
                }, function (ret, err) {
                    if (ret) {
                        console.log(JSON.stringify(ret.data));
                        if(vm.p == 1){
                            vm.list = ret.data.list;
                        }else{
                            if(ret.data.list.length > 0){
                                for(var i=0;i<ret.data.list.length;i++){
                                    vm.list.push(ret.data.list[i]);
                                }  
                            }else{
                                api.toast({
                                    msg: '没有数据了',
                                    duration: 2000,
                                    location: 'bottom'
                                });
                                return false;
                            }
                        }
                        vm.p +=1;
                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            },
            open_content:function (index) {
                api.openWin({
                    name: 'content_win',
                    url: 'widget://html/content_win.html',
                    pageParam: {
                        id: vm.list[index].id,
                        title: vm.list[index].title
                    }
                });
            }
        }
    });
    apiready = function () {
        vm.cid = api.pageParam.cid;
        vm.init();

        api.setRefreshHeaderInfo({
            visible: true,
            loadingImg: 'widget://image/refresh.png',
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...',
            showTime: true
        }, function (ret, err) {
            vm.p = 1;//初始化页码
            vm.init();
            setTimeout("api.refreshHeaderLoadDone()", '500');
        });

        api.addEventListener({
            name:'scrolltobottom',
            extra:{
                threshold:0 //滚到底部触发事件回调
            }
        }, function(ret, err){
            vm.init();//追加数据
        });


        //监听事件
        api.addEventListener({
            name: 'init_article_list'
        }, function (ret, err) {
            var cid = ret.value.cid;
            if(vm.cid == cid){
                return false;
            }else{
                vm.cid = cid;
                vm.p = 1;
                vm.init();
            }
        });
    };
</script>
